<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
	<meta charset="UTF-8">
	<title>选星星~</title>
	<style>
		.comment-total-right.left {
			float: left;
			padding: 20px;
		}
		.comment-total-right p {
			width: 100%;
			clear: both;
		}
		.comment-total-right p span {
			float: left;
			font-size: 1em;
			line-height: 28px;
			color: #707070;
		}
		.comment-total-right p em {
			float: right;
			font-size: 1em;
			line-height: 28px;
			font-style: normal;
			color: #EA2A39;
		}
		.comment-total-right p i{
			width: 20px;
			float: left;
			height: 28px;
			padding-right: 1px;
			background: url(xing2.png) no-repeat center 5px/17px auto;
		}
		.comment-total-right p i.act{
			background: url(xing1.png) no-repeat center 5px/17px auto;
		}
	</style>
</head>
<body>
<section class="comment-total">
	<div class="comment-total-right left">
		<p>
			<span>菜品:</span>
			<label class="start-eva" data-start="1"></label>
			<em>1分</em>
		</p>
		<p>
			<span>服务:</span>
			<label class="start-eva" data-start="3"></label>
			<em>2分</em>
		</p>
		<p>
			<span>环境:</span>
			<label class="start-eva" data-start="0"></label>
			<em>5分</em>
		</p>
	</div>
</section>

<script src="jquery.min.js"></script>
<script>
	// @module 点击星星评价
	function Starteva(name){
		this.name = name;
	}
	Starteva.prototype = {
		addTag: function(){
			$(this.name).each(function(){
				Starteva.prototype.tag(this);
			});
		},
		tag: function(tagObj){
			var num = $(tagObj).attr('data-start'),
					_html = '',
					i = 0;
			Starteva.prototype.fraction(tagObj,num);
			while(i < 5){
				num > 0?_html+= '<i class="act" data-id="'+i+'"></i>':_html+= '<i data-id="'+i+'"></i>';
				num--;
				i++;
			}
			$(tagObj).html(_html);
		},
		event: function(){
			$(this.name).on('click','i',Starteva.prototype.startCli);
		},
		startCli: function(){
			var parent = $(this).parent(),
					id = $(this).attr('data-id');
			parent.attr('data-start',parseInt(id)+1);
			Starteva.prototype.tag(parent);
		},
		fraction: function(tagObj,num){
			$(tagObj).next().html(num + '分');
		},
		init:function(){
			this.addTag();
			this.event();
		}
	};
	var startEva = new Starteva('.start-eva');
	startEva.init();
</script>
</body>
</html>